<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 40px;
            height: 40px;
            display: inline-block;
            text-align: center;
            font-size: 0;
            padding: 0;
            margin: 0;
        }
        #box{
            display: block;
            width: 800px;
            height: 800px;
            margin: 0 auto;

        }
        .box_1{
            background-color: #ff6700;
        }
        .box_3{
            width: 40px;
            height: 25px;
            font-size: 28px;
        }
    </style>
</head>
<body>
<div  id="box">
</div>
<script>
    var ary=[
        [0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0],
        [1,1,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0],
        [0,1,0,0,1,1,1,0,0,0,0,1,1,1,1,0,0,0,0,0],
        [0,1,0,0,1,0,1,1,1,1,1,1,0,0,1,0,0,0,0,0],
        [0,1,0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0],
        [0,1,0,0,1,0,0,1,1,1,1,1,0,0,1,0,0,0,0,0],
        [1,1,0,0,1,0,0,1,0,0,0,1,1,1,1,1,1,0,0,0],
        [0,1,0,0,1,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0],
        [0,1,0,0,1,0,1,1,0,0,0,0,0,1,0,0,0,0,0,0],
        [0,1,0,0,1,0,1,1,1,1,1,1,1,1,0,0,0,0,0,0],
        [0,1,1,1,1,0,0,0,0,0,0,0,1,1,1,1,1,1,1,0],
        [0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0],
        [0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,1,0,0,0,1,1,1,1,1,1,1,0,0,0,1,1,1,0],
        [0,0,1,1,1,1,1,0,0,0,0,0,1,0,0,1,1,0,1,0],
        [0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,1,0,1,1,0],
        [0,0,0,0,1,1,1,1,1,0,0,0,0,1,1,1,0,1,0,0],
        [0,0,0,0,1,0,0,1,1,1,0,1,1,1,0,0,0,1,1,0],
        [0,0,0,0,1,1,1,1,0,1,1,1,0,0,0,0,0,0,1,3]
    ];
    var X_x = 19,X_y = 19;
    function game_1(){
        var eve = event.keyCode;
        console.log(ary[X_x][X_y]);
        console.log(eve);
        console.log("@"+X_x+"@"+X_y);
        if(eve == 38){
            if(X_x>0&&ary[X_x-1][X_y]==1){
                ary[X_x][X_y] = 1;
                X_x = X_x-1;
                ary[X_x][X_y] = 3;
                console.log("@"+X_x+"@"+X_y);
                console.log(ary);
            }
        }
        if(eve == 40){
            if(X_x<19&&ary[X_x+1][X_y]==1){
                ary[X_x][X_y] = 1;
                X_x = X_x+1;
                ary[X_x][X_y] = 3;
                console.log("@"+X_x+"@"+X_y);
                console.log(ary);
            }
        }
        if(eve == 37){
            if(X_y>0&&ary[X_x][X_y-1]==1){
                ary[X_x][X_y] = 1;
                X_y = X_y-1;
                ary[X_x][X_y]=3;
                console.log("@"+X_x+"@"+X_y);
                console.log(ary);
            }
        }
        if(eve == 39){
            if(X_y<19&&ary[X_x][X_y+1]==1){
                ary[X_x][X_y] = 1;
                X_y = X_y+1;
                ary[X_x][X_y] = 3;
                console.log("@"+X_x+"@"+X_y);
                console.log(ary);
            }
        }
        n1();
    }
    document.body.onkeydown=game_1;
    function n1(){
        var a = "";
        for(var i=0;i<ary.length;i++){
            for(var j=0;j<ary[i].length;j++){
                if(ary[i][j]==0){
                    a = a+"<div class='box_1'></div>";
                }else if(ary[i][j]==1){
                    a = a+"<div class='box_2'></div>1";
                }else if(ary[i][j]==3){
                    a = a+"<div class='box_3'>☆</div>";
                }
            }
            a = a+"<br>";
        }
        document.getElementById("box").innerHTML = a;
    }
    n1();






</script>
</body>
</html>